<template>
	<view class="photoArt_box">
		<view class="photoArt_tit">
			<image mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/09b80f14-940d-47fa-833c-c21f1a7e4c19.webp"></image>
		</view>
		<!-- 图片部分 -->
		<view class="picture_art">
			<image :src="imgUrl" mode="aspectFill"></image>
		</view>
		<!-- 文字部分 -->
		<view class="picture_text">
			<textAnimate :text="textInfo"></textAnimate>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import textAnimate from '/components/textAnimate/textAnimate.vue'
	const textInfo = "往后的日子里|你是我道不完的话|唱不完的歌|写不完的诗|走不完的路|和手中牵着的人"
	import { ref } from 'vue'
	const imgUrl: String = ref('')
	const fileList = uni.getStorageSync('fileList')
	imgUrl.value = fileList[1].url
</script>

<style lang="scss" scoped>
	.photoArt_box {
		.photoArt_tit {
			height: 80rpx;
			text-align: center;
			padding-top: 40rpx;
			margin-bottom: 10rpx;
			image {
				height: 100%;
				animation: photoArtTit 2s linear;
				@keyframes photoArtTit {
					0% {
						transform: scale(.5);
					}
					100% {
						transform: scale(1);
					}
				}
			}
		}
		.picture_art {
			margin: 0 80rpx;
			position: relative;
			height: 280rpx;
			&::after {
				content: '';
				display: block;
				position: absolute;
				left: 15rpx;
				top: 15rpx;
				width: 100%;
				height: 100%;
				background-color: #d9b475;
				animation: imageAfterAnimate 2s linear;
				@keyframes imageAfterAnimate {
					0% {
						left: 0rpx;
						top: 300rpx;
					}
					100% {
						left: 15rpx;
						top: 15rpx;
					}
				}
			}
			image {
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 1;
				animation: imageAnimate 2s linear;
				@keyframes imageAnimate {
					0% {
						opacity: .2;
					}
					100% {
						opacity: 1;
					}
				}
			}
		}
		.picture_text {
			text-align: center;
			color: #d9b375;
			padding: 15rpx 0;
		}
	}
</style>